<%= decidim_modal id: "process-steps-modal", class: "participatory-space__metadata-modal", data: do %>
  <div data-dialog-container>
    <%= icon "flag-line" %>
    <h3 id="dialog-title-process-steps-modal" data-dialog-title><%= t("participatory_process_steps.index.process_steps", scope: "decidim") %></h3>
    <div>
      <div class="participatory-space__metadata-modal__list-container" data-controller="accordion" data-multiselectable="false" data-collapsible="false">
        <ol class="participatory-space__metadata-modal__list">
          <% steps.each_with_index do |step, i| %>
            <% active = step == active_step %>
            <li>
              <%# NOTE: The following markup is duplicated to fulfill a11y requirements %>
              <% if steps.length == 1 %>
                <div id="trigger-process-steps-<%= i %>" class="participatory-space__metadata-modal__step<%= " is-active" if active %>">
                  <span><%= step.position + 1 %></span>
                  <span>
                    <span class="participatory-space__metadata-modal__step-title">
                      <span class="participatory-space__metadata-modal__step-current"><%= t("active_step", scope: "layouts.decidim.participatory_processes.participatory_process") %></span>
                      <%= decidim_escape_translated(step.title) %>
                    </span>
                    <span class="participatory-space__metadata-modal__step-dates"><%= step_dates(step) %></span>
                  </span>
                </div>
              <% else %>
                <button id="trigger-process-steps-<%= i %>" class="participatory-space__metadata-modal__step<%= " is-active" if active %>" data-controls="panel-process-steps-<%= i %>" data-open="<%= "true" if active %>">
                  <span><%= step.position + 1 %></span>
                  <span>
                    <span class="participatory-space__metadata-modal__step-title">
                      <span class="participatory-space__metadata-modal__step-current"><%= t("active_step", scope: "layouts.decidim.participatory_processes.participatory_process") %></span>
                      <%= decidim_escape_translated(step.title) %>
                    </span>
                    <span class="participatory-space__metadata-modal__step-dates"><%= step_dates(step) %></span>
                  </span>
                </button>
              <% end %>
            </li>
          <% end %>
        </ol>
        <div>
          <% steps.each_with_index do |step, i| %>
            <div id="panel-process-steps-<%= i %>" class="editor-content">
              <%= decidim_sanitize_editor_admin(translated_attribute(step.description)) %>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
<% end %>
